<template>
	<view class="container">
		<u-navbar title="账单服务" :autoBack="true" :fixed="true" :bgColor="'#ffffff'" :placeholder="true" :titleStyle="{
				color: '#333',
				fontSize: '16px',
			}"></u-navbar>

		<!-- 账单卡片 -->
		<view class="bill-card" @click="goToDetail(item)" :key="i" v-for="(item,i) in billList">
			<view class="bill-header">
				<text class="title">账单期数：{{item.name_text}}{{item.type_text}}</text>
				<text class="status paid" v-if="item.status" >{{item.status_text}}</text>
				<text class="status unpaid" v-if="!item.status" >{{item.status_text}}</text>
			</view>

			<view class="bill-info">
				<view class="info-first">
					<view class="info-item">
						<text class="label">需收金额：</text>
						<text class="value">¥{{item.money}}</text>
					</view>
					<view class="info-item">
						<text class="label">账单金额：</text>
						<text class="value">¥{{item.money}}</text>
					</view>
				</view>
				<view class="info-second info-item">
					<text class="label">报单周期：</text>
					<text class="value">{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Fees
	} from '@/api/lease.js'
	export default {
		data() {
			return {
				contract_id:'',
				billList: []
			};
		},
		onLoad(e) {
			this.contract_id = e.id
			this.getbillList()
		},
		methods: {
			goToDetail(item) {
				if (!item.status) {
					uni.navigateTo({
						url: "/pages-lease/bill/bill-detail?id=" + item.id
					});
				}
			},
			getbillList() {
				Fees({
					type: 2,
					contract_id:this.contract_id
				}).then((res) => {
					console.log(res.data.data)
					this.billList = res.data.data
				})
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.billList = []; // 清空当前列表数据
				this.getbillList(); // 请求第一页数据
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},
		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: #f5f6fa;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.bill-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom:24rpx;
	}

	.bill-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}

		.status {
			font-size: 28rpx;

			&.unpaid {
				color: #ff5a5f;
			}
			&.paid {
				color: #20C500;
			}
		}
	}

	.bill-info {
		display: flex;
		flex-direction: column;
		gap: 24rpx;

		.info-first {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.info-item {
			display: flex;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 28rpx;
				color: #999;
				width: 160rpx;
			}

			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
</style>